@mixin clip($size) {
  clip-path: polygon(0 0, 0 calc(100% - $size), $size 100%, 100% 100%, 100% $size, calc(100% - $size) 0);
}

@mixin clip-tr($size) {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% $size, calc(100% - $size) 0);
}

@mixin clip-bl($size) {
  clip-path: polygon(0 0, 0 calc(100% - $size), $size 100%, 100% 100%, 100% 0);
}

$SIZES: 2, 4, 6, 8, 12, 16, 20;

@each $size in $SIZES {
  .clip-#{$size} {
    @include clip(#{$size}px);
  }
}

@each $size in $SIZES {
  .clip-tr-#{$size} {
    @include clip-tr(#{$size}px);
  }
}

@each $size in $SIZES {
  .nested-clip-#{$size} {
    @include clip(#{$size}px);

    &::before {
      @include clip(#{$size - 0.5}px);
    }
  }
}

@each $size in $SIZES {
  .nested-clip-tr-#{$size} {
    @include clip-tr(#{$size}px);

    &::before {
      @include clip-tr(#{$size - 0.5}px);
    }
  }
}

@each $size in $SIZES {
  .nested-clip-bl-#{$size} {
    @include clip-bl(#{$size}px);

    &::before {
      @include clip-bl(#{$size - 0.5}px);
    }
  }
}

.nested-border {
  position: relative;
  z-index: 0;

  &::before {
    bottom: 1px;
    top: 1px;
    left: 1px;
    right: 1px;
    background-color: #ffffff;
    position: absolute;
    z-index: -1;
    content: '';
  }
}
